@import '~scss/variables';
@import '~scss/mixins';

$slider-bar-width: 24px;
$silder-circle-diameter: 12px;

.wrapper {
  border-color: transparent;
  background-color: $light-color07;
  box-shadow: none;
  color: $dark-color06;
  padding-left: 20px;
  padding-right: 20px;

  &.primary {
    background-color: $dark-color07;
    color: $white;
  }

  &.control {
    background-color: $btn-control-bg;
    color: $white;
  }
}

.switch {
  position: relative;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding-right: 30px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;

  .inner {
    display: block;
    min-width: 20px;
  }

  &::before {
    content: '';
    right: 0;
    width: $slider-bar-width;
    height: 5.8px;
    background: $white;
    border-radius: 100px;
    @include vertical-center;
  }

  &::after {
    content: '';
    position: absolute;
    right: $slider-bar-width - $silder-circle-diameter;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: $white;
    box-shadow: 0 1px 2px 0 rgba(33, 42, 51, 0.04),
      0 1px 1px 0 rgba(33, 42, 51, 0.04);
    transition: all 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    @include vertical-center;
  }

  &.on {
    &::after {
      right: 0;
    }
  }

  &.disabled {
    pointer-events: none;
    opacity: 0.4;
  }
}
